<template>
    <div>
  
      <!-- 当前位置 -->
      <div>
        <br />
        <el-breadcrumb separator-class="el-icon-arrow-right" id="one">
          <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>当前位置</el-breadcrumb-item>
          <el-breadcrumb-item>养老服务管理系统</el-breadcrumb-item>
          <el-breadcrumb-item>数据统计</el-breadcrumb-item>
          <el-breadcrumb-item>养老服务人群</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <br />
      <!-- 当前位置 -->
  
  
      <!-- 搜索框 -->
      <div id="sousuokuang">
        <div id="sousuobeijing"></div>
        <br />
        <div style="color:#990707">搜索条件</div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="统计年:">
            <el-select v-model="formInline.tongjinian" placeholder="-全部-">
              <el-option label="-全部-" value=""></el-option>
              <el-option label="2005" value="2005"></el-option>
              <el-option label="2010" value="2010"></el-option>
              <el-option label="2015" value="2015"></el-option>
              <el-option label="2022" value="2022"></el-option>
            </el-select>
          </el-form-item>
  
  
  
          <!-- <el-button type="text" >打开嵌套表格的 Dialog</el-button> -->
  
          <el-form-item label="行政区划:">
            <el-button type="success" @click="dialogTableVisible = true">选择</el-button>
  
            <el-dialog title="选择行政区划" :visible.sync="dialogTableVisible">
    
      <el-cascader
      v-model="zuihouzhi"
      :options="options" :show-all-levels="false"></el-cascader>
    
  </el-dialog>
          </el-form-item>
  
         
          
          
  
  
  
          &nbsp;&nbsp;
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="onSubmit">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 搜索框 -->
  
      <!-- <el-button type="primary" icon="el-icon-search" @click="ceshi()">测试</el-button> -->
  
  <!-- 导入导出按钮 -->
      <div id="daorudaochu">
        <el-button type="success">
        <download-excel
            class="export-btn"
            :data="tableData"
            :fields="jsonFields"
            type="xls"
            header="服务人群列表"
            name="服务人群列表.xls"
          >导出
          <i class="el-icon-upload el-icon--right"></i>
         
        </download-excel>
      </el-button>
        <el-button  :plain="true" @click="open2" type="primary">打印<i class="el-icon-upload el-icon--right"></i></el-button>
        
      </div>
  
  <!-- 导入导出按钮 -->
  
      <!-- 表格 -->
      
      <div id="biaoge">
  
        <el-table :data="tableData" style="width: 100%" id="memeda">
  
          <el-table-column
          label="序号"
        type="index"
        width="50"
        
        >
      </el-table-column>
          <el-table-column prop="zhuzhi" label="县（市）" width="120" height="40">
          </el-table-column>
          <el-table-column prop="zongRenshu" label="总数（人）" width="120" height="40">
          </el-table-column>


          <el-table-column label="65周岁以上老年人（人）">
            
            <el-table-column prop="liuwuZongrenshu" label="总数" width="90" height="40">
          </el-table-column>

          <el-table-column prop="liuwuZilishu" label="自理老人" width="90" height="40">
          </el-table-column>

          <el-table-column prop="liuwuBanzilishu" label="半自理老人" width="100" height="40">
          </el-table-column>

          <el-table-column prop="liuwuShinengshu" label="失能老人" width="90" height="40">
          </el-table-column>

          
          </el-table-column>



          <el-table-column label="80周岁以上老年人（人）">
            
            <el-table-column prop="bawuZongshu" label="总数" width="90" height="40">
          </el-table-column>

          <el-table-column prop="bawuZilishu" label="自理老人" width="90" height="40">
          </el-table-column>

          <el-table-column prop="bawuBanlizishu" label="半自理老人" width="100" height="40">
          </el-table-column>

          <el-table-column prop="bawuShinengshu" label="失能老人" width="90" height="40">
          </el-table-column>
          
          </el-table-column>


          <el-table-column prop="chengshiSanwushu" label="城市三五人员（人）" width="170" height="40">
          </el-table-column>
          
        </el-table>
  
      </div>
      <!-- 表格 -->
  
    </div>
  </template>
  
  
  
  <script>
  import axios from 'axios'
  import JsonExcel from "vue-json-excel";
  
  export default {
    components: {
      DownloadExcel: JsonExcel,
    },
    data() {
      return {
        jsonFields:{
                '县（市）': 'zhuzhi',
                '总数（人）': 'zongRenshu',
                '总数': 'liuwuZongrenshu',
                '自理老人': 'liuwuZilishu',
                '半自理老人': 'liuwuBanzilishu',
                '失能老人': 'liuwuShinengshu',
                '总数': 'bawuZongshu',
                '自理老人': 'bawuZilishu',
                '半自理老人': 'bawuBanlizishu',
                '失能老人': 'bawuShinengshu',
                '城市三五人员': 'chengshiSanwushu',
        },
        formInline:{tongjinian:'',xingzhengquhua:''},
        jiequzhishuzu:[],
        jiequzifuchuan:'',
        zuihouzhi:[],
        options: [{
            value: '新疆维吾尔自治区',
            label: '新疆维吾尔自治区',
            children: [{
              value: '乌鲁木齐市',
              label: '乌鲁木齐市',
              children: [{
                value: '天山区',
                label: '天山区'
              }, {
                value: '达坂城区',
                label: '达坂城区'
              }, {
                value: '乌鲁木齐县',
                label: '乌鲁木齐县'
              }, {
                value: '新市区',
                label: '新市区'
              }, {
                value: '天山区',
                label: '天山区'
              }, {
                value: '米东区',
                label: '米东区'
              }]
            }, {
              value: '吐鲁番地区',
              label: '吐鲁番地区',
              children: [{
                value: '吐鲁番市',
                label: '吐鲁番市'
              }, {
                value: '鄯善县',
                label: '鄯善县'
              }, {
                value: '托克逊县',
                label: '托克逊县'
              }]
            },{
              value: '哈密地区',
              label: '哈密地区',
              children: [{
                value: '哈密市',
                label: '哈密市'
              }, {
                value: '巴里坤哈萨克自治区',
                label: '巴里坤哈萨克自治区'
              }, {
                value: '伊吾县',
                label: '伊吾县'
              }]
            },{
              value: '阿克苏地区',
              label: '阿克苏地区',
              children: [{
                value: '阿克苏市',
                label: '阿克苏市'
              }, {
                value: 'dingbudaohang',
                label: '温宿县'
              }, {
                value: '库车县',
                label: '库车县'
              }, {
                value: '沙雅县',
                label: '沙雅县'
              }]
            },{
              value: '克拉玛依市',
              label: '克拉玛依市',
              children: [{
                value: '独山子区',
                label: '独山子区'
              }, {
                value: '克拉玛依区',
                label: '克拉玛依区'
              }, {
                value: '白碱滩区',
                label: '白碱滩区'
              }, {
                value: '乌尔禾区',
                label: '乌尔禾区'
              }]
            },{
              value: '昌吉回族自治区',
              label: '昌吉回族自治区',
              children: [{
                value: '昌吉市',
                label: '昌吉市'
              }, {
                value: '阜康区',
                label: '阜康区'
              }, {
                value: '呼图壁县',
                label: '呼图壁县'
              }, {
                value: '玛纳斯县',
                label: '玛纳斯县'
              }, {
                value: '奇台县',
                label: '奇台县'
              }, {
                value: '吉木萨尔县',
                label: '吉木萨尔县'
              }, {
                value: '木垒哈萨克自治县',
                label: '木垒哈萨克自治县'
              }]
            }]
          }],
        dialogTableVisible: false,
        tableData: [{}]
      }
    },
    methods: {
      // <!-- /chain-api/back/info/login -->
      chaxunOne(){
        if(this.zuihouzhi[1]==null){
          // this.formInline.xingzhengquhua=this.zuihouzhi[1];
          this.formInline.xingzhengquhua='';
        }else{
          this.formInline.xingzhengquhua=this.zuihouzhi[1];
        }
        
        axios.post("/chain-api/renqun",this.formInline).then(res=>{
              if(res.data.message=='成功'){
                this.tableData=res.data.data;
                console.log("注意下下下");
                console.log(res.data.data);
              }
        })
      },
      onSubmit() {
        this.chaxunOne();
      },
      open2() {
          this.$message({
            showClose: true,
            message: '🙂',
            type: 'success'
          });
        },
      ceshi(){
       
        // this.jiequzhishuzu=this.zuihouzhi.split(',');
        // alert(this.jiequzhishuzu[2]);
        this.jiequzifuchuan=this.zuihouzhi[1];
        console.log(this.jiequzifuchuan);
        // console.log("looklookme:"+this.zuihouzhi.split(','));
       
        // this.jiequzhishuzu="你好,我好,大家好".split(",");
        // console.log("looklookmetwo:"+this.jiequzhishuzu);
      }
    },
    mounted(){
      this.chaxunOne();
    }
  }
  </script>
  
  <style scope>
  #one {
    width: 36%;
    background-color: rgb(231, 156, 15);
    position: absolute;
    left: 220px;
  }
  
  #sousuokuang {
    width: 50%;
    position: absolute;
    left: 270px;
    top: 150px;
  }
  #biaoge{
    position: absolute;
    left: 240px;
    top: 300px;
  }
  #sousuobeijing{
    background-color: rgb(149, 182, 131);
    width: 100%;
    height: 70%;
    position: absolute;
    left: -10px;
    top: 16px;
    opacity: 0.3;
  }
  .el-form-item__label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #990707;
    line-height: 40px;
    padding: 0 12px 0 0;
    box-sizing: border-box;
  }
  #daorudaochu{
    position: absolute;
    left: 250px;
    top: 250px;
  }
  .el-cascader-menu {
    color: #224b9d;
  }
  .el-cascader:not(.is-disabled):hover .el-input__inner {
    cursor: pointer;
    border-color: #55E116;
  }
  #memeda{
  height: 300px;
  overflow: auto;
}
  </style>